<template>
	<view class="formback">

		<view class="background-fs borderradius activeContent">
			<view class="contentLeft">
				<view class="left">
					<h4 class="h4">456</h4>
					<text class="text">转入申请</text>
				</view>
				<view class="rigth">
					<h4 class="h4">456</h4>
					<text class="text">转出申请</text>
				</view>
			</view>
			<view class="contentRigth">
				<view class="img">
					<image class="right-img" src="../../static/images/yishenhe.png" mode=""></image>
				</view>
			</view>
		</view>

		<view class="background-fs borderradius svgView">
			<qiun-data-charts type="column" :opts="opts" :chartData="chartData" />
		</view>
		<view class="background-fs borderradius svgView">
			<qiun-data-charts type="column" :opts="opts" :chartData="chartData" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				chartData: {},
				opts: {
					color: ["#FAC858", "#EE6666", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 5],
					enableScroll: false,
					legend: {
						position: "top",
						float: "right",
						padding: 15,
					},
					xAxis: {
						disabled:false,
						disableGrid: true,
						axisTick: false,
						axisLineWidth: 20,
					},
					yAxis: {
						disabled:false,
						axisLineWidth: 15,
						disableGrid: true,
						axisLine: true,
						axisTick: false,
						data: [{
							min: 0
						}]
					},
					extra: {
						column: {
							type: "group",
							width: 20,
							activeBgColor: "#000000",
							seriesGap: 5,
							linearOpacity: 0.5,
							linearType: "custom",
							customColor: [
								"#FA7D8D",
								"#EB88E2"
							]
						}
					}
				}
			};
		},
		onShow() {
			this.getList()
		},
		methods: {
			getList() {
				let res = {
					categories: ["1月", "2月", "3月", "4月", "5月", "6月"],
					series: [{
							name: "目标值",
							data: [35, 36, 31, 33, 13, 340]
						},
						{
							name: "完成量",
							data: [18, 27, 21, 24, 6, 28]
						}
					]
				};

				this.chartData = JSON.parse(JSON.stringify(res));

			}
		}
	}
</script>

<style scoped lang="scss">
	.right-img {
		width: 120rpx;
		height: 120rpx;
		margin-left: 36rpx;

	}


	.activeContent {
		height: 200rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 32rpx 64rpx;
		box-sizing: border-box;

		.contentLeft {
			width: 50%;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.h4 {
				font-size: 20px;
				font-weight: 500;
				letter-spacing: 0px;
				line-height: 28.96px;
				color: rgba(0, 0, 0, 1);
			}

			.text {
				font-size: 14px;
				font-weight: 500;
				letter-spacing: 0px;
				line-height: 20.27px;
				color: rgba(153, 153, 153, 1);
			}
		}
	}

	.background-fs {
		margin: 32rpx;
		border-radius: 20rpx;
		overflow: hidden;
		background-color: #fff;
	}
</style>